<template>
  <div class="mainContainer">
    <Header />

    <div class="content-card">
      <el-form ref="formRef" :model="form" :inline="true" label-width="100px">
        <el-form-item label="所属组织：" prop="organization">
          <treeSelect
            ref="selectTreeRef"
            :props="defaultProps"
            :options="treeData"
            :value="form.organization"
            :clearable="true"
            :accordion="true"
            @getValue="getValue($event)"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="关键词：" prop="message">
          <el-input
            style="width: 200px"
            placeholder="工号/学号/姓名"
            v-model="form.message"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            placeholder="请选择状态"
            v-model="form.status"
            style="width: 160px"
          >
            <el-option label="未提交" value="uncommitted"></el-option>
            <el-option label="待审核" value="reviewed"></el-option>
            <el-option label="已完成" value="finished"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测状态：" prop="checkStatus">
          <el-select
            placeholder="请选择检测状态"
            v-model="form.checkStatus"
            style="width: 160px"
          >
            <el-option label="未检测" value="uncheck"></el-option>
            <el-option label="检测中" value="checking"></el-option>
            <el-option label="检测通过" value="checkPass"></el-option>
            <el-option label="检测失败" value="checkFail"></el-option>
            <el-option label="检测未通过" value="checkNotPass"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          ><el-button type="primary" icon="el-icon-search"
            >搜索</el-button
          ></el-form-item
        >
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content-announcement">
      <el-button type="primary">导出</el-button>
    </div>

    <div class="content-table">
      <!-- 功能区 -->
      <tableTool />

      <!-- 数据表单 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
          prop="topicName"
          label="课题名称"
          width="240"
          sortable
        ></el-table-column>
        <el-table-column prop="school" label="学校" width="160" sortable>
        </el-table-column>
        <el-table-column prop="collage" label="学院" width="160" sortable>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160" sortable>
        </el-table-column>
        <el-table-column
          prop="guideTeacher"
          label="指导教师"
          width="120"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="teacherId"
          label="教师工号"
          width="120"
          sortable
        ></el-table-column>
        <el-table-column
          prop="student"
          label="选题学生"
          width="120"
          sortable
        ></el-table-column>
        <el-table-column
          prop="studentId"
          label="学生学号"
          width="120"
          sortable
        ></el-table-column>
        <el-table-column
          prop="checkResult"
          label="检测结果"
          width="120"
          sortable
          align="center"
        >
          <el-button type="danger" size="mini" plain>未检测</el-button>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="120"
          align="center"
          sortable
        >
          <el-button size="mini">完成</el-button>
        </el-table-column>
        <el-table-column label="课题详情" width="120" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" size="mini"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="look(scope.row)" size="mini">查看</el-button>
            <el-button @click="transferTo()" size="mini">流转到</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          background
          layout="prev, pager, next, jumper,sizes, total"
          :total="400"
        >
        </el-pagination>
      </div>

      <!-- 信息对话框 -->
      <TopicDetails
        v-if="dialogFormVisible"
        :messages="messages"
        :dialogFormVisible="dialogFormVisible"
        :dialogTopicForm="dialogTopicForm"
        :dialogHeaderName="dialogHeaderName"
        @closeDialogFormVisible="closeDialogFormVisible"
      />

      <!-- 任务书对话框 -->
      <taskBook
        v-if="dialogTaskBookVisible"
        :messages="messages"
        :dialogTaskBookVisible="dialogTaskBookVisible"
        :dialogHeaderName="dialogHeaderName"
        :dialogTable="dialogTable"
        :dialogReviewed="dialogReviewed"
        @closeDialogFormVisible="closeDialogFormVisible"
      />

      <!-- 查看流转到对话框 -->
      <TransferTo
        v-if="dialogTransferToVisible"
        :dialogTransferToVisible="dialogTransferToVisible"
        @closeDialogFormVisible="closeDialogFormVisible"
      />
    </div>
  </div>
</template>

<script>
import Header from '@/components/MainHeader/GuoChengManage/ThesisDraft/QueryList.vue';
import treeSelect from '@/components/Function/treeSelect.vue';
import tableTool from '@/components/Function/TableTool.vue';
import TopicDetails from '@/components/Function/Dialog/TopicDetails.vue';
import taskBook from '@/components/Function/Dialog/TaskBook.vue';
import TransferTo from '@/components/Function/Dialog/TransferTo.vue';

export default {
  components: {
    Header,
    treeSelect,
    tableTool,
    TopicDetails,
    taskBook,
    TransferTo,
  },

  data() {
    return {
      // 信息
      form: {
        message: '',
        organization: '',
        status: '',
        checkStatus: '',
      },

      // 树状数据中，选定子元素名，展示名，选中值变量名
      defaultProps: {
        children: 'list',
        label: 'name',
        value: 'id',
      },

      // 树状数据
      treeData: [
        {
          id: '1',
          name: '佛山科学技术学院',
          list: [
            {
              id: '1-1',
              name: '电子信息工程学院',
              list: [
                { id: '1-1-1', name: '物联网工程' },
                { id: '1-1-2', name: '网络工程' },
                { id: '1-1-3', name: '计算机科学与技术' },
                { id: '1-1-4', name: '计算机科学与技术(人工智能方向)' },
                { id: '1-1-5', name: '计算机科学与技术(第二学位)' },
                { id: '1-1-6', name: '电子信息工程' },
              ],
            },
          ],
        },
      ],

      // 表格信息
      tableData: [
        {
          topicName: '钢材价格实时更新系统设计实现',
          school: '佛山科学技术学院',
          collage: '电子信息工程学院',
          major: '计算机科学与技术',
          guideTeacher: '李四',
          teacherId: 2080,
          student: '张天',
          studentId: 20180130314,
        },
        {
          topicName: '基于python的爬虫程序设计',
          school: '佛山科学技术学院',
          collage: '电子信息工程学院',
          major: '网络工程',
          guideTeacher: '张三',
          teacherId: 2080,
          student: '李世伟',
          studentId: 20180130216,
        },
        {
          topicName: '人脸识别系统的实现',
          school: '佛山科学技术学院',
          collage: '电子信息工程学院',
          major: '计算机科学与技术',
          guideTeacher: '王五',
          teacherId: 2080,
          student: '王大宝',
          studentId: 20180130112,
        },
      ],

      // 是否显示对话框信息
      dialogFormVisible: false,
      dialogTopicForm: false,
      dialogTaskBookVisible: false,
      dialogTable: false,
      dialogReviewed: false,
      dialogTransferToVisible: false,

      // 对话框表头名字
      dialogHeaderName: '',

      // 表格信息
      messages: '',
    };
  },

  methods: {
    //点击重置按钮
    resetForm() {
      this.$message({
        message: '重置成功',
        type: 'success',
        duration: 1000,
      });
      this.$refs.formRef.resetFields();
    },

    // 打开查看表格信息对话框
    handleClick(rows) {
      this.messages = rows;
      this.dialogHeaderName = '课题详情';
      this.dialogFormVisible = true;
      this.dialogTopicForm = true;
    },

    // 打开查看任务书对话框
    look(rows) {
      this.messages = rows;
      this.dialogHeaderName = '详情';
      this.dialogTaskBookVisible = true;
      this.dialogTable = true;
    },

    // 打开流转到对话框
    transferTo() {
      this.dialogTransferToVisible = true;
    },

    // 关闭对话框
    closeDialogTaskBookVisible() {
      this.dialogTaskBookVisible = false;
      this.dialogTable = false;
      this.dialogReviewed = false;
    },

    // 关闭对话框
    closeDialogFormVisible() {
      this.dialogFormVisible = false;
      this.dialogTransferToVisible = false;
      this.dialogTaskBookVisible = false;
      this.dialogTable = false;
      this.dialogReviewed = false;
    },
  },
};
</script>

<style lang="less" scoped>
.content-announcement {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
}
</style>
